<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="js/jquery-1.11.0.min.js"></script>
	

	</head>
	<body>
		<select id="province">
			<option>--请选择省份--</option>
		</select>
		
		<select id="city">
			<option >--请选择城市--</option>
		</select>
	</body>

<script>
	//发送异步请求，加载省份信息
	let url = "/ajax/province?action=findAll";
	let params = {};
	$.get(url,params,function (data){
		// [{id:1,name:"江西省"},{id:2,name:"浙江省"}]
		$.each(data,function (idx,ele){
			// ele: {id:1,name:"江西省"}

			//向省份对应的select中追加一个option节点
			$("#province").append("<option value='"+ele.id+"'>"+ele.name+"</option>")

		});

	},"json");


	//给省份下拉选绑定域内容改变事件 - change
	$("#province").change(function (){
		//获取当前省份的id值
		let provinceId = this.value;
		// alert(provinceId)

		//发送异步请求，获取当前选中省份对应的城市
		let url = "/ajax/city?action=findByPid"
		let params = {pid:provinceId}
		$.get(url,params,function (data){
			//将城市select中的内容回复原样
			$("#city").html("<option >--请选择城市--</option>");

			$.each(data,function (idx,ele){
				//向城市对应的select中追加一个option节点
				$("#city").append("<option >"+ele.cname+"</option>")
			});
		},"json");

	})
</script>
</html>
